<template>
  <div>
    <el-dialog title="提交售后物流" :visible.sync="visible" :before-close="closeDialog" :close-on-click-modal="clickModalClose" :width="dialogWidth">
      <el-form ref="form" :model="form" :rules="rules" label-position="top">
        <el-form-item
          label="配送单号"
          prop="fareorder"
        >
          <el-input v-model="form.fareorder" autocomplete="off" :maxlength="30" @keyup.native="form.fareorder=form.fareorder.replace(/[^\da-zA-Z]/g, '')" clearable />
        </el-form-item>
        <el-form-item
          label="快递公司"
          prop="code"
        >
          <!-- <el-input v-model.number="form.name" disabled autocomplete="off" /> -->
          <el-select v-model="form.code" placeholder="快递公司">
            <el-option
              v-for="item in company"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getComcode, addComcode } from '@/api/aftermarket'
import dialogMixin from '@/components/Mixins/dialog'
export default {
  mixins: [dialogMixin],
  props: {
    visible: { type: Boolean, default: false },
    aftermarketid: { type: String, default: null }
  },
  data(vm) {
    const validateFareorder = async(rule, value, callback) => {
      if (!value) {
        return callback('请输入配送单号')
      } else {
        // 请求查询快递公司，如果查不到则单号有问题
        const res = await getComcode({ fareorder: value })
        const detail = res.detail
        if (detail && detail.status === 2) {
          vm.company = []
          vm.form.code = ''
          vm.form.name = ''
          return callback('快递查询失败，请检查配送单号是否正确')
        } else {
          // vm.form.code = detail.company[0].code
          // vm.form.name = detail.company[0].name
          vm.company = detail.company || []
          if(vm.company[0]) vm.form.code = vm.company[0].code
          callback()
        }
      }
    }
    return {
      company: [], // 通过配送单号查询出来的快递公司列表
      form: {
        fareorder: null,
        name: null,
        code: null
      },
      rules: {
        fareorder: [
          { validator: validateFareorder, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          const res = await addComcode({
            fareorder: this.form.fareorder,
            aftermarketid: this.aftermarketid,
            code: this.form.code
          })
          this.closeDialog()
          this.$notify({
            title: '提示',
            type: res.code === 1001 ? 'success' : 'error',
            message: res.msg,
            position: 'bottom-right'
          })
        }
      })
    },
    closeDialog() {
      this.$refs.form.resetFields()
      this.company = [] // 先清空上一次快递列表
      this.$emit('update:visible', false)
      this.$emit('getData')
    }
  }
}
</script>
